import React from "react";

import { ajax } from '../../common';

import { Input, Row,Col,Checkbox,List  } from 'antd';

import ProductModelObjectSelect from '../model/ProductModelObjectSelect'
 /**
   * 导入模型属性
   */
export default class ImportProductModelPropertiesPanel extends React.Component {

	state = {
		modelProperties : [],
		propertyNames : {},
		propertyTitles : {},
		checkedValues : [],
	}

	getSelectProperties = () => {
		const {checkedValues,propertyTitles,propertyNames} = this.state;

		return checkedValues.map(checkedValue => {
			return {
				property : propertyNames[checkedValue],
				propertyTitle : propertyTitles[checkedValue],
			}
		});
	}

	changeModelObject = (value) => {
		
		ajax('PRODUCT/MODEL/productModelObject/getModelObjectProperties',{id : value.key},(data) => {
			const propertyTitles = {};
			const propertyNames = {};
			data.map((property) => {
				propertyTitles[property.id] = "";
				propertyNames[property.id] = property.propertyName;
			});
			this.setState({modelProperties : data,propertyTitles : propertyTitles,propertyNames : propertyNames});
		});
	}

	onChange = (checkedValues) => {
		this.setState({checkedValues : checkedValues});
	}

	onInputChange = (event) => {
		event.persist()
		const {propertyTitles} = this.state;
		propertyTitles[event.target.id] = event.target.value;
		this.setState({propertyTitles : propertyTitles});
	}

	render(){
		const {modelProperties} = this.state;
		return (
			<React.Fragment>
				<Row>
					<Col span={6}>
					选择数据模型对象
					</Col>
					<Col span={18}>
					<ProductModelObjectSelect objectType="DTO" width="100%" onSelectModelObject={this.changeModelObject}/>
					</Col>
				</Row>
				<Checkbox.Group style={{ width: '100%',marginTop : '10px' }} onChange={this.onChange}>
				<List
					header={<div>选择模型属性</div>}
					bordered
					dataSource={modelProperties}
					renderItem={item => (
						<List.Item>
							<List.Item.Meta
								title={<Checkbox key={item.id} value={item.id}>{item.propertyName}</Checkbox>}
								description={item.remarks}
							/>
							<Input key={item.id + 'Label'} id={item.id} placeholder="请输入属性标题" onChange={this.onInputChange}/>
						</List.Item>
					)}
					/>
				</Checkbox.Group>
			</React.Fragment>
		);
	}

}